<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/12/21
  Time: 17:13
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="${ctx}/css/bootstrap.min.css">
    <script src="${ctx}/js/jquery.min.js"></script>
    <script src="${ctx}/js/bootstrap.min.js"></script>
    <script src="${ctx}/My97DatePicker/WdatePicker.js"></script>
    <script>
        $(function () {
            let cid = ${book.category.cid}
                $.ajax({
                    url: "${ctx}/load.do",
                    type: "post",
                    dataType: "json",
                    success: function (data) {
                        $.each(data, function (index, value) {
                            if (value.cid === cid) {
                                var $option = $("<option value='" + value.cid + "' selected>" + value.cname + "</option>");
                            } else {
                                var $option = $("<option value='" + value.cid + "'>" + value.cname + "</option>");
                            }
                            $('select').append($option);
                        })
                    }
                });
        });


        function uploadPicture() {
            var formData = new FormData();
            formData.append("action", "upload");
            formData.append("pic", document.querySelector("#cover").files[0]);
            formData.append("enctype", "multipart/form-data");
            $.ajax({
                url: "${ctx}/upload.do",
                type: "post",
                data: formData,
                dataType: "text",
                contentType: false,
                processData: false,
                success: function (data) {
                    $("#uploadPic").attr("src", "${ctx}/" + data);
                    $('#pic_src').val(data);
                    JSON.stringify()
                },
                error: function () {
                    alert("上传失败！");
                }
            })
        }

        function getBack() {
            if (confirm("确认不进行修改?")) {
                window.location.href = "${ctx}/list.do";
            }
            return false;

        }
    </script>
</head>
<body>
<h2>图书编辑</h2>
<hr/>
<form action="${ctx}/update.do" method="post">
    <input type="hidden" name="_method" value="put">
    <input type="hidden" name="id" value="${book.id}">
    <table class="table">
        <tr>
            <td>图书名</td>
            <td><input type="text" name="bookName" value="${book.bookName}"/></td>
        </tr>
        <tr>
            <input type="hidden" name="cover" id="pic_src" value="${book.cover}"/>
            <td>
                封面图片<input class="btn btn-default" type="button" onclick="uploadPicture()" value="上传"/>
            </td>
            <td><input type="file" id="cover"/></td>
        </tr>
        <tr>
            <td><img src="${ctx}/${book.cover}" id="uploadPic"/></td>
        </tr>
        <tr>
            <td>价格</td>
            <td><input type="text" name="price" value="${book.price}"/></td>
        </tr>
        <tr>
            <td>作者</td>
            <td><input type="text" name="author" value="${book.author}"/></td>
        </tr>
        <tr>
            <td>出版社</td>
            <td><input type="text" name="press" value="${book.press}"/></td>
        </tr>
        <tr>
            <td>出版日期</td>
            <td><input type="text" name="pubDate" value="${book.pubDate}" onclick="WdatePicker({readOnly:true})"/>
            </td>
        </tr>
        <tr>
            <td>图书分类</td>
            <td>
                <select name="category_id">
                </select>
            </td>
        </tr>
        <tr>
            <td><input class="btn btn-default" type="submit" value="修改"></td>
            <td><input class="btn btn-default" type="button" onclick="getBack()" value="返回列表"></td>
        </tr>
    </table>
</form>
</body>
</html>
